<template>
  <el-row :gutter="20">
    <el-col :span="15">
      <el-input
        v-model="keyword"
        placeholder="搜索用户"
        style="width: 200px; margin-bottom: 16px;"
      />
      <el-button
        type="primary"
        size="default"
        style="margin-left: 12px; vertical-align: middle;"
        @click="batchToggleStatus"
      >
        批量禁用/启用
      </el-button>
      <el-table
        ref="tableRef"
        :data="pagedUsers"
        style="width: 100%"
        :row-class-name="rowClassName"
        @row-click="showDetail"
        @selection-change="onSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="status"
          label="状态"
        >
          <template #default="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        style="margin-top: 16px; text-align: right;"
        background
        layout="prev, pager, next"
        :total="filteredUsers.length"
        :page-size="pageSize"
      />
    </el-col>
    <el-col :span="9">
      <el-card
        v-if="currentUser"
        style="min-height: 300px;"
      >
        <div style="display: flex; align-items: center;">
          <el-avatar
            :size="64"
            style="margin-right: 16px;"
          >
            <el-icon><UserFilled /></el-icon>
          </el-avatar>
          <div>
            <div style="font-size: 20px; font-weight: bold;">
              {{ currentUser.username }}
            </div>
            <div style="color: #888;">
              {{ currentUser.email }}
            </div>
            <el-tag
              :type="currentUser.status === '正常' ? 'success' : 'info'"
              style="margin-top: 8px;"
            >
              {{ currentUser.status }}
            </el-tag>
          </div>
        </div>
        <el-divider />
        <div>注册时间：{{ currentUser.registerTime }}</div>
        <div>最近登录：{{ currentUser.lastLogin }}</div>
        <el-button
          size="small"
          style="margin-top: 16px;"
          @click="toggleStatus(currentUser)"
        >
          {{ currentUser.status === '正常' ? '禁用' : '启用' }}
        </el-button>
      </el-card>
      <el-empty
        v-else
        description="请选择左侧用户"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'
const keyword = ref('')
const pageSize = 5
const currentPage = ref(1)
const tableRef = ref()
const selectedRows = ref<any[]>([])
const users = ref([
  { username: '张三', email: 'zhangsan@school.edu', status: '正常', registerTime: '2025-06-01', lastLogin: '2025-06-02' },
  { username: '李四', email: 'lisi@school.edu', status: '禁用', registerTime: '2025-06-03', lastLogin: '2025-06-04' },
  { username: '王五', email: 'wangwu@school.edu', status: '正常', registerTime: '2025-06-05', lastLogin: '2025-06-06' },
  { username: '赵六', email: 'zhaoliu@school.edu', status: '正常', registerTime: '2025-06-06', lastLogin: '2025-06-07' },
  { username: '小明', email: 'xiaoming@school.edu', status: '禁用', registerTime: '2025-06-02', lastLogin: '2025-06-03' }
])
const filteredUsers = computed(() =>
  users.value.filter(u => u.username.includes(keyword.value) || u.email.includes(keyword.value))
)
const pagedUsers = computed(() =>
  filteredUsers.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize)
)
const currentUser = ref<any>(null)
function showDetail(row: any) {
  currentUser.value = row
}
function toggleStatus(row: any) {
  row.status = row.status === '正常' ? '禁用' : '正常'
  ElMessage.success('状态已更新')
}
function onSelectionChange(val: any[]) {
  selectedRows.value = val
}
function batchToggleStatus() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择用户')
    return
  }
  selectedRows.value.forEach(row => {
    row.status = row.status === '正常' ? '禁用' : '正常'
  })
  ElMessage.success('批量操作成功')
}
function rowClassName({ row }: { row: any }) {
  return currentUser.value && row.username === currentUser.value.username ? 'active-row' : ''
}
</script>

<style scoped>
.active-row {
  background: #f0f7ff !important
}
</style> 